<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>中国风卡牌游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="loading" class="loading">
        <div class="loading-text">游戏加载中...</div>
    </div>
    <div id="game-container">
        <!-- 机器人玩家区域 -->
        <div class="player-area robot-area">
            <div class="player-info">
                <span>机器人</span>
                <span class="life-points">生命值: <span id="robot-life">15</span></span>
            </div>
            <div class="card-zones">
                <div id="robot-deck" class="deck">卡组</div>
                <div id="robot-graveyard" class="graveyard">墓地</div>
                <div id="robot-monster-zone" class="monster-zone">怪兽区域</div>
                <div id="robot-magic-zone" class="magic-zone">魔法区域</div>
                <div id="robot-hand" class="hand">手牌区域</div>
            </div>
        </div>

        <!-- 游戏信息区域 -->
        <div id="game-info">
            <div id="battle-log" class="battle-log"></div>
            <div class="game-controls">
                <button id="phase-button" class="control-btn">结束当前阶段</button>
                <button id="surrender" class="control-btn">投降</button>
            </div>
        </div>

        <!-- 用户玩家区域 -->
        <div class="player-area player-area">
            <div class="card-zones">
                <div id="player-hand" class="hand">手牌区域</div>
                <div id="player-monster-zone" class="monster-zone">怪兽区域</div>
                <div id="player-magic-zone" class="magic-zone">魔法区域</div>
                <div id="player-deck" class="deck">卡组</div>
                <div id="player-graveyard" class="graveyard">墓地</div>
            </div>
            <div class="player-info">
                <span>玩家</span>
                <span class="life-points">生命值: <span id="player-life">15</span></span>
            </div>
        </div>
    </div>

    <!-- 属性选择对话框 -->
    <div id="attribute-dialog" class="dialog">
        <h2>请选择你的属性</h2>
        <div class="attribute-buttons">
            <button data-attribute="金">金</button>
            <button data-attribute="木">木</button>
            <button data-attribute="水">水</button>
            <button data-attribute="火">火</button>
            <button data-attribute="土">土</button>
        </div>
    </div>

    <script type="module" src="game-presenter.js"></script>
</body>
</html>
